import { HtmlResize } from "@logicflow/extension";


class ResizableHtmlModel extends HtmlResize.model {
    initNodeData(data) {
        super.initNodeData(data);
        this.width = 150;
        this.height = 250;
        this.text.draggable = true;
        // (this.id = `html${Math.floor(1000 + Math.random() * 9000)}`),
            (this.type = "resizable-html"),
            (this.properties = {
                tableName: "Users",
                fields: [
                    {
                        key: "id",
                        type: "number",
                    },
                    {
                        key: "name",
                        type: "string",
                    },
                    {
                        key: "age",
                        type: "integer",
                    },
                ],
            });
    }
    getNodeStyle() {
        const style = super.getNodeStyle();
        style.fill = "#f1a131";
        style.strokeWidth = 1;
        return style;
    }
    getDefaultAnchor() {
        const { height, x, y, id, properties, width } = this;
        const anchorPositon = [];
        anchorPositon.push(
            {
                x,
                y: y - height / 2 + 5,
                type: "targetAnchor",
                id: `${id}_targetAnchor`,
            },
            {
                x,
                y: y + height / 2 - 5,
                type: "targetAnchor",
                id: `${id}D_targetAnchor`,
            },
            {
                x: x - width / 2 + 5,
                y,
                type: "l_targetAnchor",
                id: `${id}_l_targetAnchor`,
            },
            {
                x: x + width / 2 - 5,
                y,
                type: "r_targetAnchor",
                id: `${id}_r_targetAnchor`,
            }
        );
        if (properties.fields) {
            let preOffset = 36;
            let boxheigh = 24;
            properties.fields.forEach((fields) => {
                preOffset += boxheigh;
                anchorPositon.push(
                    {
                        x: x + width / 2 - 13,
                        y: y - this.height / 2 + preOffset,
                        type: `${id}_${properties.fields.key}l`,
                        id: `${fields.key}${id}`,
                    },
                    {
                        x: x - width / 2 + 13,
                        y: y - this.height / 2 + preOffset,
                        type: `${id}_${properties.fields.type}r`,
                        id: `${fields.type}${id}`,
                    }
                );
            });
        }
        return anchorPositon;
    }
}
class ResizableHtmlView extends HtmlResize.view {
    setHtml(rootEl) {
        rootEl.innerHTML = "";
        const {
            properties: { fields, tableName },
        } = this.props.model;

        // 添加检查以确保 fields 已经定义
        if (!fields) {
            console.error("Fields are undefined");
            return;
        }

        rootEl.setAttribute("class", "table-container");
        const container = document.createElement("div");
        container.className = `table-node table-color-${Math.ceil(Math.random() * 4)}`;
        const tableNameElement = document.createElement("div");
        tableNameElement.innerText = tableName;
        tableNameElement.className = "table-name";
        container.appendChild(tableNameElement);
        const fragment = document.createDocumentFragment();

        // 添加检查以确保 fields 是数组
        if (Array.isArray(fields)) {
            for (let i = 0; i < fields.length; i++) {
                const item = fields[i];
                const itemElement = document.createElement("div");
                itemElement.className = "table-feild";
                const itemKey = document.createElement("span");
                itemKey.innerText = item.key;
                const itemType = document.createElement("span");
                itemType.innerText = item.type;
                itemType.className = "feild-type";
                itemElement.appendChild(itemKey);
                itemElement.appendChild(itemType);
                fragment.appendChild(itemElement);
            }
        } else {
            console.error("Fields should be an array");
        }

        container.appendChild(fragment);
        rootEl.appendChild(container);
    }
}



export default {
    type: "resizable-html",
    view: ResizableHtmlView,
    model: ResizableHtmlModel,
};
